<template>
	<view class="company-tab flex bg-white text-center">
		<view v-for="(item,index) in title" 
		:class="[{'active':active==index},'padding']" 
		@click="handelTab(index)">
			{{item}}
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

withDefaults(
	defineProps<{title:Array<string>}>(),
	{
		title: () => ['我的咨询','消息'],
	})
	
const active = ref<number>(0)
const model = defineModel<number>()
const handelTab = (idx:number)=>{
	active.value = idx,
	model.value = idx
}
</script>

<style lang="scss">
.company-tab{
	// border-bottom: 1upx solid #eee;
	view{
		width: 25%;
		color: #aaa;
	}
	.active{
		position: relative; // 添加定位，为伪元素做准备
		color: black;
		border-bottom: none; // 移除原有的底部边框
	}
	.active::after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%); // 使边框居中
		width: 25%; // 可调整此值控制边框长度
		height: 4px;
		background-color: #000;
	}
}
</style>